<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p5_浮动布局</title>
  <style>
    .fu{
      /* 设置背景颜色 */
      background-color: #ff0;
      width: 500px;
      /* 任何超出元素边界的额外内容都会被裁剪掉，不会显示出来。 */
      overflow: hidden;
    }
    .fu>div{
      /* 设置边框高度，框度，颜色 */
      width: 100px;
      height: 100px;
      border: 3px solid #000;
    }
    .z1{
      /* 给元素设置颜色 */
      background-color: #f00;
      /* 设置元素的浮动位置  设置为 left 时，该元素会尽可能地向左移动，
         直到碰到包含它的容器的左边框或其他浮动元素的右边框 */
      float:left;
    }
    .z2{
      /* 给元素设置颜色 */
      background-color: #0f0;
      /* 设置元素的浮动位置  设置为 left 时，该元素会尽可能地向左移动，
         直到碰到包含它的容器的左边框或其他浮动元素的右边框 */
      float:left;
    }
    .z3{
      /* 给元素设置颜色 */
      background-color: #00f;
      /* 设置元素的浮动位置  设置为 left 时，该元素会尽可能地向左移动，
         直到碰到包含它的容器的左边框或其他浮动元素的右边框 */
      float:left;
    }

  </style>
</head>
<body>
/* .fu>.z*3 Tab自动补全 */
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>

</div>
</body>
</html>